<template>
    <div>
        <van-cell title="修改个人信息" is-link to="/my" arrow-direction="left" class="modifyTop"/>

    <van-form @submit="onSubmit">
        <van-field
                v-model="username"
                name="昵称"
                label="昵称"
                placeholder="昵称"
                :rules="[{ required: true, message: '请填写昵称' }]"
        />

        <van-field
                v-model="phone"
                name="手机号"
                label="手机号"
                placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <div>
            <span class="text">修改头像</span>
            <van-uploader :after-read="afterRead" />
        </div>

        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" @click="change">
                提交
            </van-button>
        </div>
    </van-form>
    </div>
</template>

<script>
    import {uploadphotos,modifynformation} from "../../../api/user-api";

    export default {
        name: "Collection",
        data() {
            return {
                username: '',
                phone: '',
            };
        },
        methods: {
            onSubmit(values) {
                // console.log('submit', values);
            },
            change(){
                modifynformation(this.username,this.phone).then(res=>{

                    console.log(res)
                    if(res.code==0){
                        this.$toast('修改成功');
                        this.$router.push({path:"/my"})
                    }

                })
            },
            afterRead(file) {
                // 此时可以自行将文件上传至服务器
                console.log(file)
                uploadphotos(file.file).then(res=>{
                    // console.log(res)
                })
            },
        },
    }
</script>

<style scoped lang="less">
    .modifyTop{
        background: #EDEDED;
        height: 50px;
        /*line-height: 50px;*/
        font-size: 20px;
        text-align: center;

    }
    .text{
        margin: 5px 35px 10px 15px;
        color: #646566;
    }
</style>